<template>
	<view class="apply-pages" :style="{background:pageColor}" v-if="isLoad">
		<view class="apply-form">
			<view class="fill-base pd-lg">
				<view class="flex-between b-1px-b">
					<view class="item-text">支付宝账号</view>
					<input v-model="form.alipay_number" type="text" class="item-input flex-1"
						:class="[{'mr-md':form.alipay_number}]" maxlength="50" :placeholder="rule[0].errorMsg" />
					<i @tap.stop="toRest('alipay_number')" class="iconfont icon-jia-bold rotate-45"
						v-if="form.alipay_number"></i>
				</view>
				<view class="flex-between b-1px-b">
					<view class="item-text">支付宝姓名</view>
					<input v-model="form.alipay_name" type="text" class="item-input flex-1"
						:class="[{'mr-md':form.alipay_name}]" maxlength="50" :placeholder="rule[1].errorMsg" />
					<i @tap.stop="toRest('alipay_name')" class="iconfont icon-jia-bold rotate-45"
						v-if="form.alipay_name"></i>
				</view>
				<view class="flex-between">
					<view class="item-text">身份证号码</view>
					<input v-model="form.alipay_id_code" type="text" class="item-input flex-1"
						:class="[{'mr-md':form.alipay_id_code}]" maxlength="20" :placeholder="rule[2].errorMsg" />
					<i @tap.stop="toRest('alipay_id_code')" class="iconfont icon-jia-bold rotate-45"
						v-if="form.alipay_id_code"></i>
				</view>
				<view class="flex-center mt-lg pt-md pb-lg">
					<view @tap.stop="submit" class="bind-btn flex-center f-title c-base radius"
						:style="{background:primaryColor}">立即绑定</view>
				</view>
			</view>
		</view>
		<view class="pd-lg">
			<view class="f-title text-bold mb-md">支付宝账号获取：</view>
			<view class="f-paragraph c-desc mt-md mb-md">1)、打开【支付宝】-【我的】页面</view>
			<image mode="widthFix" class="item-image radius-16"
				:src="`https://api.huixuananmm.com/admin/anmo/mine/alipay-0.jpeg`">
			</image>
			<view class="f-paragraph c-desc mt-md mb-md">2)、打开上图箭头所示，个人信息页面</view>
			<image mode="widthFix" class="item-image radius-16"
				:src="`https://api.huixuananmm.com/admin/anmo/mine/alipay-1.jpeg`">
			</image>
			<view class="fill-base pd-lg mt-lg radius-26">
				<view class="f-title text-bold mb-md">身份信息</view>
				<view class="f-paragraph c-title mb-md">根据相关法律法规要求，请保持身份信息完整，以便使用支付宝相关功能</view>
				<image mode="widthFix" class="radius-16"
					:src="`https://api.huixuananmm.com/admin/anmo/mine/alipay-2.jpeg`">
				</image>
			</view>
		</view>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				form: {
					alipay_number: '',
					alipay_name: '',
					alipay_id_code: ''
				},
				rule: [{
					name: "alipay_number",
					checkType: "isNotNull",
					errorMsg: "请输入您的支付宝账号",
					regType: 2
				}, {
					name: "alipay_name",
					checkType: "isNotNull",
					errorMsg: "请输入您的支付宝姓名",
					regType: 2
				}, {
					name: "alipay_id_code",
					checkType: "isIdCard",
					errorMsg: "请输入您的身份证号码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			coachCashAccount: state => state.user.coachCashAccount,
			agentCashAccount: state => state.user.agentCashAccount,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			await this.initIndex()
			this.isLoad = true
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getCoachAccount', 'getAgentAccount']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				let port = 1
				// #ifdef MP-WEIXIN-COACH || H5-COACH
				port = 2
				// #endif
				// #ifdef MP-WEIXIN-AGENT || H5-AGENT
				port = 3
				// #endif
				// #ifdef APP-PLUS
				port = this.is_app_user
				// #endif 

				let {
					type
				} = this.options
				let {
					status = 0
				} = this.userCoachStatus
				let {
					id: uid = 0,
					coach_account_login = 0,
					agent_account_login = 0
				} = this.userInfo

				if ((status == 2 || status == 3) && coach_account_login) {
					port = 2
				}

				if (agent_account_login) {
					port = 3
				}

				let methodArr = {
					1: ['getUserInfo', 'userInfo'],
					2: ['getCoachAccount', 'coachCashAccount'],
					3: ['getAgentAccount', 'agentCashAccount'],
				}

				await this[methodArr[port][0]]()

				let {
					alipay_number = '',
						alipay_name = '',
						alipay_id_code = ''
				} = this[methodArr[port][1]]
				this.form = {
					alipay_number,
					alipay_name,
					alipay_id_code
				}
				this.$util.hideAll()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			toRest(key) {
				this.$nextTick(() => {
					this.form[key] = ''
				})
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.mine.bindAlipayNumber(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `绑定成功`
					});
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>


<style lang="scss">
	.apply-pages {
		.apply-form {
			.item-text {
				width: 250rpx;
			}
		}

		.bind-btn {
			width: 600rpx;
			height: 80rpx;
		}

		.item-image {
			width: 690rpx
		}
	}
</style>